<template name='videosnap'>
  {{#unless isVideoHidden this}}
  <div class='videosnap wid-ful {{#if isVideoBlurred this}}blur{{/if}}' style="max-width:210px;">
    <a href='/v/{{author}}/{{link}}' title='{{title}}'>
      <div id='snaphover wid-ful' class='videosnapsnap' style="height:118px;">
        <div class="pos-abs wid-ful" style="z-index:1;height:118px;">
        <span class="videoscore"><i class="thumbs up icon"></i>{{votesLength}}</span>
        <span class="videopower">{{displayPayout ups downs}}<i class="bolt icon"></i></span>
        {{#if json.duration}} 
          <span class="videosnapduration">{{durationDisplay json.duration}}</span>
        {{/if}}
        {{#if viewers}} 
          <span class="livestreamviewcount">{{viewers}} viewer{{#unless equals viewers '1'}}s{{/unless}}</span>
        {{/if}}
        {{#if isOnWatchAgain}}
          <div id="remove" class="remove snapbutton pos-abs" title='Stop sharing {{title}}' style="float: right;right: 5px;background: black;top: 5px;border-radius: 4px;opacity: 0.9;">
            <i class="remove icon" style="padding: 0px;color:white;margin: 8px;font-size: 1.2em;">
              <span style="z-index:9000;"></span>
            </i>
          </div>
        {{else}}
          {{#if isInWatchLater}} 
          <div id="watchlater" class="watchlater snapbutton right floated pos-abs dsp-non" title='Remove from Watch later' style="float: right;right: 5px;background: black;top: 5px;border-radius: 4px;opacity: 0.9;">
            <i class="checkmark icon" style="padding: 0px;color:white;margin: 8px;font-size: 1.2em;">
              <span style="z-index:9000;"></span>
            </i>
          </div>
          {{else}}
          <div id="watchlater" class="addwatchlater snapbutton right floated pos-abs dsp-non" title='Watch later' style="float: right;right: 5px;background: black;top: 5px;border-radius: 4px;opacity: 0.9;">
            <i class="time icon" style="padding: 0px;color:white;margin: 8px;font-size: 1.2em;">
              <span style="z-index:9000;"></span>
            </i>
          </div>
          {{/if}}
        {{/if}}
        <div id="snapload" class="ui snaploader pos-abs wid-ful" style="z-index:-1;background-color: rgba(167, 167, 167, 0.85);height:118px;display: block;text-align: center;">
            <i class="icon photo nosnap" style="font-size:28px;margin-top:40px;"></i>
            <div class="ui text nosnap" style="margin-top:10px;">{{translate 'SNAP_MISSING_IMAGE'}}</div>
          </div> 
          <img id="snapimg" class="sprite" data-src="{{json.thumbnailUrl}}" width="100%" height="100%" style="height:118px;width:210px;" alt="" >            
        </div>
        <br />
      </div>
    </a>
    <div class="boxdisplayer">
      <div class='videosnaptitle'>
        <a href='/v/{{author}}/{{link}}'>
          <span class="customtitlelink">{{json.title}}</span>
        </a>
      </div>
    </div>
    <div class='videosnapauthor'>
      {{#if json.hide}}
      <span style='color: #f01a30;'>{{translate 'VIDEO_UNLISTED'}}</span>
      {{else}}
      <a href='/c/{{author}}'>
        <span class="customlink">{{author}}</span>
      </a>
      {{/if}}
    </div>
    <div class='videosnapdetails'>
        <div class='videosnaprest'>
          {{displayRewards dist distSteem distScot distHive}}
        </div>
        <div class='videosnaptime'>
        {{timeAgo ts}}
      </div>
    </div>
    {{ticker}}
  </div>
  {{/unless}}
</template>